<template>
	<view class="container">

		<view class="header-bg">
			<image style="width: 100%;height: 100%;" src="@/static/mine/bg.png" mode=""></image>
		</view>
		<view class="content-box">
			<view class="info" @click="onLogin" v-if="!isLogin">
				<view class="info-wrap">
					<view class="avatar-box">
						<image style="width: 100%;height: 100%;" src="../../static/default_avatar.png" mode=""></image>
					</view>
					<view class="info-box">
						<view class="name" style="margin-top: 50rpx;">请登录</view>
					</view>
				</view>

			</view>
			<view class="info" v-else>
				<view class="info-wrap">
					<view class="avatar-box">
						<image style="width: 100%;height: 100%;" :src="userInfo.avatar" mode=""></image>
					</view>
					<view class="info-box">
						<view class="name">{{userInfo.nickname || '暂无昵称'}}</view>
						<view class="id">ID:{{userInfo.uid}}</view>
					</view>
				</view>

				<view class="edit-info">
					<u-button shape="circle" :customStyle="{width:'176rpx',height:'64rpx',fontSize:'32rpx'}"
						type="primary" text="编辑资料" @click="onJumpPage('/pages/mine/editUserInfo')"></u-button>
				</view>
			</view>
			<view class="counts">
				<view class="count-box">
					<view class="number" @click="onJumpPage('/pages/mine/myInterest')">{{infoTotal.attention_count}}
					</view>
					<view class="label">关注</view>
				</view>
				<view class="count-box" @click="onJumpPage('/pages/mine/collectOrLike?type=publish')">
					<view class="number">{{infoTotal.publish_count}}</view>
					<view class="label">发布</view>
				</view>
				<view class="count-box" @click="onJumpPage('/pages/mine/collectOrLike?type=like')">
					<view class="number">{{infoTotal.like_count}}</view>
					<view class="label">点赞</view>
				</view>
				<view class="count-box" @click="onJumpPage('/pages/mine/collectOrLike?type=colle')">
					<view class="number">{{infoTotal.colle_count}}</view>
					<view class="label">收藏</view>
				</view>
			</view>
			<view class="pet-box" v-if="isLogin && petList.length>0">
				<view class="pet-header" @click="onJumpPage('/pages/mine/record/record')">
					<view class="label">我的爱宠</view>
					<image class="icon-right" src="../../static/cell_right_white.png" mode=""></image>
				</view>
				<view class="pet-content">
					<view class="pet-item" v-for="(item,index) in petList" :key="index">
						<image class="pet-avatar" :src="item.avatar" mode=""></image>
						<view class="pet-info">
							<view class="name">
								<text class="text-ellipsis-1">{{item.name}}</text>
								<image v-if="item.sex == 1" style="width: 36rpx;height: 36rpx;flex-shrink: 0;"
									src="@/static/mine/female.png" mode="">
								</image>
								<image v-else style="width: 36rpx;height: 36rpx;flex-shrink: 0;" src="@/static/mine/male.png" mode="">
								</image>
							</view>
							<view class="tips" v-if="item.type_id_name">
								{{item.type_id_name}}
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="card-box">
				<view class="card-title">
					工具与服务
				</view>
				<view class="card-list">
					<view class="card-item" @click="onJumpPage('/pages/mine/record/record')">
						<view class="left">
							<image class="img" style="width: 60rpx;height: 60rpx;" src="@/static/mine/cwjd.png" mode="">
							</image>
							<text>宠物建档</text>
						</view>
						<view class="right">
							<image class="icon-right" src="../../static/cell_right.png" mode=""></image>
						</view>
					</view>
					<!-- $Commom.Jump.Open('/pages/mine/cirle/myCircle') -->
					<view class="card-item" @click="onJumpPage('/pages/mine/circle/myCircle')">
						<view class="left">
							<image class="img" style="width: 60rpx;height: 60rpx;" src="@/static/mine/wdqz.png" mode="">
							</image>
							<text>我的圈子</text>
						</view>
						<view class="right">
							<image class="icon-right" src="../../static/cell_right.png" mode=""></image>
						</view>
					</view>
					<view class="card-item" @click="onJumpPage('/pages/mine/circle/audit')">
						<view class="left">
							<image class="img" style="width: 60rpx;height: 60rpx;" src="@/static/mine/sh.png" mode="">
							</image>
							<text>审核</text>
						</view>
						<view class="right">
							<image class="icon-right" src="../../static/cell_right.png" mode=""></image>
						</view>
					</view>
					<view class="card-item" @click="onJumpPage('/pages/mine/festivals/festivals')">
						<view class="left">
							<image class="img" style="width: 60rpx;height: 60rpx;" src="@/static/mine/jz.png" mode="">
							</image>
							<text>祭奠</text>
						</view>
						<view class="right">
							<image class="icon-right" src="../../static/cell_right.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 协议弹窗 -->
		<u-popup :safeAreaInsetBottom="false" :show="xyShow" round="22" :customStyle="{width:'300px'}" mode="center">
			<view class="popup-box">
				<view class="popup-title">隐私政策提醒</view>
				<view class="popup-content">
					请在您使用E萌宠服务之前，请仔细阅读 <a @click="jumpPrivacyPolicy">《隐私政策》</a>，如果你同意《隐私政策》， 请点击“同意”开始使用E萌宠
				</view>
				<view class="popup-footer">
					<view class="btn" @click="onClose">拒绝</view>
					<view class="line"></view>
					<view class="btn btn-agree" @click="onAgree">同意</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		components: {},
		computed: {
			...mapState(['isLogin', 'userInfo']),
		},
		data() {
			return {
				xyShow: false, //协议弹窗
				showSheet: false,
				sheetList: [],
				petList: [],
				listModule: [{
					name: '普通',
					color: '#000000',
					fontSize: '17'
				}, {
					name: '爱宠社区',
					color: '#000000',
					fontSize: '17'
				}, {
					name: '家有金毛',
					color: '#000000',
					fontSize: '17'
				}],
				listPrivacy: [{
					name: '公开可见',
					color: '#000000',
					fontSize: '17'
				}, {
					name: '仅自己可见',
					color: '#000000',
					fontSize: '17'
				}],
				form: {
					module: '普通',
					privacy: '仅自己可见',
				},
				fileList: [],
				barList: [{
						label: '发布帖子',
						id: 0
					},
					{
						label: '发布祭奠',
						id: 1
					},
				],
				infoTotal: {
					attention_count: 0,
					browse_count: 0,
					colle_count: 0,
					like_count: 0,
					publish_count: 0
				},
				sheetCurrent: 0,
			}
		},
		onLoad() {
			// console.log('-----', this.userInfo);
			// if (this.isLogin && JSON.stringify(this.userInfo) == '{}') {

			// }
			// if (this.isLogin) {
			// 	this.getPetList();
			// 	this.getUserTotal();
			// }
		},
		onShow() {
			if (this.isLogin) {
				this.getUserInfo();
				this.getPetList();
				this.getUserTotal();
			}

		},
		methods: {
			...mapActions(['setToken', 'setUserinfo']),
			// 获取用户统计
			getUserTotal() {
				this.$Net.get(this.$api.user_total, {}).then(res => {
					this.infoTotal = res;
					console.log(res);
				})
			},
			// 加载用户信息
			getUserInfo() {
				this.$Net.get(this.$api.user_info, {}, 1).then(res => {
					this.setUserinfo(res)
				})
			},
			getPetList() {
				this.$Net.get(this.$api.pet_List, {
					page: 1,
					limit: 99
				}, 1).then(res => {
					if (res.list && res.list.length > 0) {
						this.petList = res.list
					}
				})
			},
			// 页面跳转
			onJumpPage(path) {
				if(!this.isLogin){
					this.$Msg.Toast('请先登录')
					return
				}
				this.$Jump.Open(path)
			},
			jumpPrivacyPolicy() {
				this.$Jump.Open('/pages/mine/login/privacyPolicy')
			},
			onLogin() {
				this.xyShow = true;
			},
			onClose() {
				this.xyShow = false
			},
			onAgree() {
				this.xyShow = false;
				this.$Jump.Open('/pages/mine/login/login')
			},
			onShowActionSheet(index) {
				this.sheetCurrent = index;
				if (index == 0) {
					this.sheetList = this.listModule
				} else {
					this.sheetList = this.listPrivacy;
				}
				this.showSheet = true;
			},
			onActionSheet(e) {

				if (this.sheetCurrent == 0) {
					this.form.module = e.name;
				} else {
					this.form.privacy = e.name;
				}
				this.showSheet = false;
			},
			onBack() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								resolve(res.data.data)
							}, 1000)
						}
					});
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 0;
	}

	.header-bg {
		width: 100%;
		height: 426rpx;
		background-color: #70B5FE;
		
	}

	.content-box {
		border-radius: 40rpx 40rpx 0px 0px;
		background: #ffffff;
		margin-top: -80rpx;
		min-height: 50vh;
		padding: 4rpx 36rpx;
		position: relative;
		z-index: 3;
		&:before {
			content: "";
			clear: both;
		}

		.info {
			margin-top: -52rpx;
			display: flex;
			justify-content: space-between;

			.avatar-box {
				border: 4rpx solid #fff;
				width: 168rpx;
				height: 168rpx;
				border-radius: 168rpx;
				overflow: hidden;
				margin-right: 24rpx;
			}

			.info-wrap {
				display: flex;
			}

			.info-box {
				padding-top: 36rpx;

				.name {
					color: #000;
					font-family: "PingFang SC";
					font-size: 40rpx;
					font-weight: bold;
					margin-top: 30rpx;
				}

				.id {
					color: rgba(0, 0, 0, 0.60);
					font-family: "PingFang SC";
					font-size: 28rpx;
					font-weight: 400;
					margin-top: 10rpx;
				}
			}

			.edit-info {
				margin-top: 74rpx;
				float: right;
			}

		}


		.counts {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-top: 30rpx;
			text-align: center;
			padding: 0 36rpx;

			.number {
				color: #000;
				font-family: Roboto;
				font-size: 40rpx;
				font-weight: bold;
			}

			.label {
				color: rgba(0, 0, 0, 0.60);
				text-align: center;
				font-family: "PingFang SC";
				font-size: 28rpx;
				margin-top: 10rpx;
			}
		}

		.pet-box {
			width: 678rpx;
			min-height: 262rpx;
			border-radius: 40rpx;
			margin-top: 32rpx;
			background: linear-gradient(119deg, #FFF -14.87%, #B1D6FF 20.67%, #FFEAE1 96.96%);
			overflow: hidden;

			.pet-header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 26rpx 32rpx 22rpx;
				color: #FFF;
				font-size: 36rpx;
				font-weight: bold;

				.icon-right {
					height: 40rpx;
					width: 40rpx;
				}
			}

			.pet-content {

				display: flex;
				align-items: center;
				padding: 0 32rpx;
				overflow: auto;

				.pet-item {
					display: flex;
					align-items: center;
					border-radius: 32rpx;
					border: 1px solid #FFF;
					background: rgba(255, 255, 255, 0.50);
					padding: 24rpx;
					margin-right: 20rpx;

					.pet-avatar {
						width: 80rpx;
						height: 80rpx;
						border-radius: 80rpx;
						overflow: hidden;
						margin-right: 16rpx;
						flex-shrink: 0;
					}

					.pet-info {
						.name {
							color: rgba(0, 0, 0, 0.80);
							font-family: "PingFang SC";
							font-size: 32rpx;
							font-weight: 400;
							display: flex;
							align-items: center;
							margin-bottom: 6rpx;
							min-width: 150rpx;

							text {
								margin-right: 10rpx;
							}
						}

						.tips {
							color: rgba(0, 0, 0, 0.40);
							font-size: 28rpx;
							font-weight: 400;
						}
					}
				}
			}
		}

		.card-box {
			margin-top: 80rpx;

			.card-title {
				margin-bottom: 30rpx;
				color: #000;
				font-family: "PingFang SC";
				font-size: 36rpx;
				font-weight: bold;
			}

			.card-list {
				.card-item {
					display: flex;
					align-items: center;
					margin-bottom: 32rpx;
					justify-content: space-between;

					.left {
						display: flex;
						align-items: center;
						color: rgba(0, 0, 0, 0.80);
						font-family: "PingFang SC";
						font-size: 32rpx;
						font-weight: 400;
					}

					.img {
						width: 60rpx;
						height: 60rpx;
						margin-right: 26rpx;
					}

					.icon-right {
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}

	}

	.popup-box {
		display: flex;
		flex-direction: column;

		.popup-title {
			font-family: "PingFang SC";
			font-size: 32rpx;
			font-weight: bold;
			line-height: 48rpx;
			text-align: center;
			padding: 42rpx 0 16rpx;
		}

		.popup-content {
			flex: 1;
			padding: 0 54rpx 64rpx;
			text-align: justify;
			color: rgba(0, 0, 0, 0.40);
			font-size: 28rpx;
			line-height: 22px;

			a {
				display: inline-block;
				color: #68B0FC;
			}
		}

		.popup-footer {
			height: 112rpx;
			display: flex;
			align-items: center;
			border-top: 1px solid #E7E7E7;

			.btn {
				display: block;
				width: 50%;
				text-align: center;
				line-height: 112rpx;
				font-size: 32rpx;
			}

			.btn-agree {
				color: #68B0FC;
			}

			.line {
				height: 100%;
				width: 2rpx;
				background-color: #E7E7E7;
			}
		}
	}
</style>